<!DOCTYPE html>
<html>
<head>
  <title>SVG.js</title>
  <script src="./../plugins/svg.min.js"></script>
  <script src="./../plugins/svg.easing.min.js"></script>
  <script src="./../plugins/svg.shapes.js"></script>
  <script src="./../utils/utils.js"></script>
</head>
<body>
</body>
<script>
  var ngon;
  var draw = SVG().addTo('body').size(800, 600)

  const param = {
    inner:  50,
    outer:  100,
    spikes: 5
  }
  const gNgonPoints = getNognPoints();
  const gStarPoints = getStarPoints(param, false);
  function make() {
    const color = SVG.Color.random();
    ngon = draw.polygon().plot(gStarPoints).attr({fill:color});
    ngon.move(300,100)
  }

  make();
  ngon.animate({
    duration: 1000,
    delay: 0,
    when: 'now',
    swing: true,
    times: true,
    wait: 0
  }).ease('sineInOut').plot(gNgonPoints).move(300, 100)

</script>
</html>